<template>
  <el-dialog
    :model-value="showVideoChooseDialog"
    @close="closeDialog"
    :close-on-click-modal="false"
  >
    <template #header>
      <span class="title">视频选择</span>
    </template>
    <div class="line"></div>
    <video-table-data
      :single="singleType"
      @select-video="handleSelectVideo"
      :operation="operationType"
    ></video-table-data>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog" style="margin-right: 10px">关闭</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import VideoTableData from '@/views/decoration/components/VideoTableData.vue'
  const props = defineProps({
    showVideoChooseDialog: {
      type: Boolean
    },
    singleType: {
      type: Boolean,
      default: false
    },
    operationType: {
      type: Boolean,
      default: true
    }
  })

  const videoData = ref([])

  const emit = defineEmits(['closeDialog'])

  function handleSelectVideo(value: any) {
    videoData.value = value
  }

  function handleConfirm() {
    emit('closeDialog', videoData.value)
  }

  function closeDialog() {
    emit('closeDialog', false)
  }
</script>

<style scoped lang="scss">
  .title {
    font-weight: bold;
    color: #333;
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: #f0f0f0;
    margin-bottom: 20px;
    margin-top: -30px;
  }
</style>
